<template>
    <!-- 订单页面 -->
    <div class="order-view">
        <!-- 标题 -->
        <div class="tite">我的订单</div>
        <!-- 导航 -->
        <van-tabs v-model:active="active" @change="changeH">
            <van-tab title="全部"></van-tab>
            <van-tab title="支付失败"></van-tab>
            <van-tab title="代发货"></van-tab>
            <van-tab title="已发货"></van-tab>
            <van-tab title="代评价"></van-tab>
        </van-tabs>
        <!-- 订单为空组件 -->
        <van-empty description="暂无订单" v-show="!orderList.length"/>
        <!-- 订单列表 -->
        <van-swipe-cell class="order-list" v-for="item in orderList">
        <div class="order">
            <van-cell :value="item.status"  icon="shop-o">
            
                <template #title>
                    <span class="custom-title">{{ item.goods[0].brand_name }}</span>
                </template>
            </van-cell>
            <div v-for="index in item.goods">
                <van-swipe-cell>
                    <van-card
                        :num="index.goods_number"
                        :price="index.price"
                        :desc="index.goods_desc"
                        :title="index.goods_name"
                        class="goods-card"
                        :thumb="index.goods_thumb"
                        />
                        
                    <!-- <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" />
                    </template> -->
                </van-swipe-cell>
            </div>
                
            <van-cell title="实付款:">
          
                <template #right-icon>
                    <span class="custom-title">￥{{ ppp(item.goods) }}</span>
                </template>
            </van-cell>
        </div>
        <!-- 右滑删除 -->
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="dle(item.trade_no)"/>
        </template>
    </van-swipe-cell>

    </div>
</template>
<script setup lang="ts">


    import { computed, ref } from 'vue';
    import API from '../api'

    import { useUserStore } from '../store';

    let userStore = useUserStore(); 

    let route = useRoute();
    // 订单数据
    let orderList = ref([]);
    // 原始数据
    let orderOlist = ref([]);
    // 状态为未支付数据
    let orderStatus = ref([]);
    // 导航
    let active = ref(0)
    // 计算总价方法
    let ppp = (val)=> {
 
        let sum = 0
        val.forEach(item =>{
           sum += item.price * item.goods_number;
        });
        return sum;
    }

    // 导航切换方法
    let changeH = (val) =>{
        // console.log(val);
        // 给原始数据
        if(val == 0){
            // console.log(11);
            
            orderList.value = orderOlist.value;
            return;
        }
        
        // 状态为未支付
        if(val == 1){
            orderOlist.value.forEach(item =>{
                if(item.status == '未支付'){
                    orderStatus.value.push(item);
                }
            });

            orderList.value = orderStatus.value;
            return
        }
        
    };
    // 钩子
    onMounted(async()=>{
        // 判断是不是从支付页面过来的
        if(route.query.trade_no){
            let even = await API.orderData('/api_payquery',{
            userId: userStore.TOKEN,
            tradeNo: route.query.trade_no
            })
            console.log(even);
            if(even.msg != 'Success'){
                // console.log(even);
                showFailToast('支付失败');
                return;
            }
            // 支付成功渲染订单
            order();
            showSuccessToast('支付成功');
        }
        
    });
    order()
    //订单渲染
    async function  order() {
        let even = await API.orderData('/api_order',{
            userId: userStore.TOKEN,
            status:'vieworder'
        });

        console.log(even);
        orderList.value = even;
        orderOlist.value = even;


    }

    // 删除订单
    let dle = async(val) =>{
        // console.log(val)
        let even = await API.orderData('/api_order',{
            userId: userStore.TOKEN,
            status:'delorder',
            tradeNo: val
        });

        if(even.code != 0){
            console.log(even);
            showFailToast('删除订单失败');
            return;
        }
        showSuccessToast('删除订单成功');
        order() 
    }


 
</script>

<style scoped  lang="less">
    // 页面大DIV
    .order-view{
        height: 100%;
        background: #EEEEEE;
    //    标题
        .tite{
            width: 100%;
            height: 5%;
            background: white;
            line-height: 40px;
            text-align: center;
            vertical-align: middle;
            font-size: 18px;
        }
        // 订单列表
        .order-list{
            overflow: hidden;
            width: 100%;
            overflow: hidden;
            border-radius: 8px;
      
            
        }
    }
    .order{
        width: 100%;
        height: 100%;
        margin: 5px 5px;
        border-radius: 8px;
        overflow: hidden;
    }
    // 商品卡牌
    .goods-card {
        margin: 0;
        background-color: white;
        width: 100% !important;
        padding: 0 10px;
    }
    // 左滑删除
    .delete-button {
        height: 90%;
        
    }

    .van-card__content{
        width: 92%;
    }
</style>